<div class="dialog-price-advance">
  <!-- 车辆信息、查询条件 -->
  <div apes-col [apesMd]="6" class="left-inquiry">
    <!--车辆信息-->
    <div>
      <span>{{ inquiryInitData['CPHM'] }}</span>
    </div>
    <div>
      <span *ngIf="carConfiguration != ''">车型配置：{{ carConfiguration }}</span>
      <span>车架号：{{ vin }}</span>
    </div>

    <!--标签页-->
    <apes-tabset [apesType]="'card'" class="left-inquiry-tabSet"
                 [apesTabBarExtraContent]="extraTemplate" [apesTabBarGutter]="8">
      <apes-tab apesTitle="按配件">
        <div class="left-inquiry-tab">
          <ng-container *ngFor="let field of filterField,let i = index">
            <ng-container *ngIf="i == 0">
              <div *ngFor="let list of field.data, let i = index" class="left-inquiry-box">
                <div class="left-inquiry-area-title">
                  <label apes-checkbox [(ngModel)]="list.checked" (ngModelChange)="checkFiltrationData(field.type)">
                    {{i + 1}}. {{list[field.type]}}
                  </label>
                </div>
              </div>
            </ng-container>
          </ng-container>
        </div>
      </apes-tab>
      <!--      [apesForceRender]="true"-->
      <apes-tab apesTitle="按供应商">
        <div class="left-inquiry-tab">
          <div *ngFor="let field of filterField,let i = index" class="left-inquiry-filtration-box">
            <ng-container *ngIf="i != 0">
              <div class="filtration-box-title">{{field.name}}</div>
              <div *ngFor="let list of field.data, let i1 = index" class="left-inquiry-box">
                <div class="left-inquiry-area-title">
                  <label apes-checkbox [(ngModel)]="list.checked" (ngModelChange)="checkFiltrationData(field.type)">
                    <span>{{i1 + 1}}.</span>
                    <span *ngIf="field.type == 'supplier'">供应商：</span>
                    <span> {{list[field.type] == 999999 ? '赋能外采' : list[field.type]}}</span>
                  </label>
                </div>
              </div>
            </ng-container>
          </div>
        </div>
      </apes-tab>
      <ng-template #extraTemplate>
        <button apes-button (click)="resetCondition()">重置</button>
      </ng-template>
    </apes-tabset>

  </div>

  <!-- 商品展示 -->
  <div apes-col [apesMd]="18">

    <div class="right-header">

      <div class="showHidden">
        <div class="showHidden-icon" (click)="openShowHidden()">
          <i *ngIf="!showHidden" apes-icon apesType="eye-invisible"></i>
          <i *ngIf="showHidden" apes-icon apesType="eye"></i>
        </div>
      </div>

    </div>

    <!-- 超出高度出现滚动条 -->
    <div class="right-inquiry">

      <apes-spin [apesSize]="'large'" *ngIf="isLoading" style="margin-top: 28vh;"></apes-spin>

      <ng-container *ngIf="!isLoading">
        <!-- 遍历 -->
        <ng-container *ngIf="inquiryShowData.length != 0">
          <div class="right-inquiry-main" *ngFor="let item of inquiryShowData, let i = index">

            <ng-container *ngIf="item['item'].length != 0">

              <!-- 配件名称 -->
              <div class="right-inquiry-title" id="{{item['YSPID']}}">
                <div class="right-inquiry-title-num">{{i + 1}}</div>
                <div class="right-inquiry-title-text">{{item['YSPMC']}}</div>

                <div *ngIf="item['brand']" class="right-inquiry-title-select">
                  <ng-select clearAllText
                             [items]="item['brand']"
                             bindLabel="name"
                             (change)="brandChange($event,item)"
                             bindValue="id" [(ngModel)]="item['brandId']"></ng-select>
                </div>
              </div>


              <!-- 对应单个商品 -->
              <div class="right-inquiry-box">
                <ng-container *ngFor="let list of item['item'];let i1 = index;">

                  <ng-container *ngIf="!item['brandId'] || list.spProduct['spBrand']['id'] == item['brandId']">
                    <div apes-row class="right-inquiry-box-main">

                      <div apes-col [apesSpan]="22" class="main-col">

                        <div apes-row>

                          <ng-container *ngIf="!item['brand']">
                            <div apes-col [apesSpan]="4" class="main-col">{{list.spProduct['OE']}}</div>
                            <div apes-col [apesSpan]="4"
                                 class="main-col text-nowrap">{{list.spProduct['qualityName']}}</div>
                            <div apes-col [apesSpan]="4" class="main-col">{{list.spProduct['spBrand']['name']}}</div>
                          </ng-container>
                          <ng-container *ngIf="item['brand']">
                            <div apes-col [apesSpan]="12" class="main-col text-nowrap">{{list.autoName}}</div>
                          </ng-container>

                          <div apes-col [apesSpan]="4" class="main-col">
                            <span
                              style="font-weight:bold;color: red">¥{{showHidden ? list.notTaxUnitPrice : '****'}}</span>
                          </div>
                          <div apes-col [apesSpan]="4" class="main-col">建议售价：{{list.priceSuggested}}</div>
                          <div apes-col [apesSpan]="4" class="main-col">供应商：{{list.supplier}}</div>
                        </div>

                        <div apes-row>
                          <div apes-col [apesSpan]="4" class="main-col">{{list.productName}}</div>
                          <div apes-col [apesSpan]="4" class="main-col">{{list.address}}</div>
                          <div apes-col [apesSpan]="4" class="main-col">{{list.state}}</div>
                          <div apes-col [apesSpan]="8" class="main-col">供应商备注：{{list.note}}</div>
                          <div *ngIf="list.hasOwnProperty('png')" apes-col [apesSpan]="4" class="main-col " (click)="showImg(list)">
                            <div class="main-png">
                              <i apes-icon apesType="picture"></i>
                            </div>
                          </div>
                        </div>

                      </div>

                      <!--勾选标记-->
                      <div apes-col [apesSpan]="2">
                        <div class="right-inquiry-btn" (click)="selectProduct(list,item)">
                          <img [src]="'./assets/tmp/img/theme/'+list['selectFlag']+'.svg'"
                               style="width: 40px;height: 40px;">
                        </div>
                      </div>
                    </div>
                  </ng-container>


                </ng-container>
              </div>

            </ng-container>

          </div>
        </ng-container>

        <ng-container *ngIf="showInquiry">
          <apes-empty class="inquiry-content-empty"></apes-empty>
        </ng-container>

      </ng-container>
    </div>
  </div>
</div>
